<template>
  <view class="container">
    <!-- 顶部 Logo 和标题 -->
    <view class="header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">毒舌穿搭鉴定局</text>
      <text class="subtitle">AI穿搭打分，一键解锁毒舌点评！</text>
    </view>

    <!-- 上传按钮区域 -->
    <view class="upload-section">
      <image class="preview-image" src="/static/preview.png" mode="aspectFit"></image>
      <view class="upload-btn" @click="navigateToUpload">
        <text class="btn-text">我要被毒舌</text>
      </view>
    </view>

    <!-- 热门展示区 -->
    <view class="hot-section">
      <view class="hot-header">
        <text class="hot-title">今日热门"车祸现场"</text>
        <text class="more" @click="navigateToRank">查看更多 ></text>
      </view>

      <!-- 热门列表 -->
      <scroll-view class="hot-list" scroll-x>
        <view class="hot-item" v-for="(item, index) in hotList" :key="index" @click="navigateToDetail(item)">
          <image class="hot-image" :src="item.image" mode="aspectFill"></image>
          <view class="hot-score">{{ item.score }}</view>
          <text class="hot-desc">{{ item.desc }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 广告区域 -->
    <view class="ad-section">
      <image class="ad-image" src="/static/clothes-banner.png" mode="aspectFill"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hotList: [
        {
          image: '/static/demo/style1.png',
          score: 98,
          desc: '这搭配...勇气可嘉！'
        },
        {
          image: '/static/demo/style2.png',
          score: 95,
          desc: '冲击视觉的时尚暴击'
        },
        {
          image: '/static/demo/style3.png',
          score: 92,
          desc: '穿搭界的奇思妙想'
        }
      ]
    }
  },
  methods: {
    handleCamera() {
      uni.chooseImage({
        count: 1,
        sourceType: ['camera'],
        success: (res) => {
          this.uploadImage(res.tempFilePaths[0])
        }
      })
    },
    handleAlbum() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          this.uploadImage(res.tempFilePaths[0])
        }
      })
    },
    uploadImage(tempFilePath) {
      uni.showLoading({
        title: '正在上传...'
      })

      // TODO: 实现图片上传到服务器的逻辑
      setTimeout(() => {
        uni.hideLoading()
        // 模拟上传成功，跳转到结果页
        uni.navigateTo({
          url: '/pages/result/result?imageUrl=' + tempFilePath
        })
      }, 1500)
    },
    navigateToRank() {
      uni.switchTab({
        url: '/pages/rank/rank'
      })
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/result/result?id=${item.id}`
      })
    },
    navigateToUpload() {
      uni.navigateTo({
        url: '/pages/upload/upload'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #8B5CF6 0%, #EC4899 100%);
  padding: 20rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;

  .logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
  }

  .title {
    font-size: 40rpx;
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.upload-section {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 40rpx;
  margin: 30rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  .preview-image {
    width: 100%;
    height: 400rpx;
    margin-bottom: 30rpx;
  }

  .upload-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 100%);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 20rpx rgba(139, 92, 246, 0.3);

    .btn-text {
      color: #FFFFFF;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}

.hot-section {
  background: linear-gradient(180deg, #FFEDD5 0%, #FDBA74 100%);
  border-radius: 20rpx;
  padding: 30rpx;

  .hot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .hot-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #FF5722;
    }

    .more {
      font-size: 24rpx;
      color: #FF5722;
    }
  }

  .hot-list {
    white-space: nowrap;
    padding: 10rpx 0;

    .hot-item {
      display: inline-block;
      width: 220rpx;
      margin-right: 20rpx;
      position: relative;
      background: #FFF6F1;
      border-radius: 16rpx;
      padding: 15rpx;

      .hot-image {
        width: 190rpx;
        height: 190rpx;
        border-radius: 95rpx;
        margin: 0 auto;
        display: block;
      }

      .hot-score {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        background: #FF4785;
        color: #FFFFFF;
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
        font-size: 24rpx;
        font-weight: bold;
        z-index: 1;
      }

      .hot-desc {
        font-size: 24rpx;
        color: #666666;
        margin-top: 12rpx;
        text-align: center;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

.ad-section {
  margin-top: 32rpx;
  border-radius: 16rpx;
  overflow: hidden;

  .ad-image {
    width: 100%;
    height: 200rpx;
  }
}

</style>